<script setup lang="ts">
import {ref, reactive, onMounted, watch} from "vue";
import {useStore} from "vuex";
import {attention_handle, attention_list} from "@/api/user.ts"
import {Message} from "view-ui-plus";

const store = useStore();

const props = withDefaults(
    defineProps<{
      articleObject: any
    }>(),
    //设置默认值
    {
      articleObject: {}
    }
);

let USER_INFO = reactive<any>(store.getters.getUserData);
let isAttention = ref<boolean>(false);

watch(() => props.articleObject, (value) => {
  get_attention_list()
})


const GoAttention = () => {
  // 点击关注 取消关注
  attention_handle({
    status: (!isAttention.value) ? 1 : 0,
    a_id: props.articleObject.user_id
  }).then((result: any) => {
    console.log(result)
    if (result.code == 200) {
      isAttention.value = !isAttention.value;
      Message.success(result.data)
    } else {
      Message.error(result.data)
    }
  })
}
const Chitchat = () => {
  // 聊天
}

const get_attention_list = () => {
  attention_list().then((result: any) => {
    result.data.forEach((id: number) => {
      if (id == props.articleObject.user_id) {
        isAttention.value = true;
      } else {
        isAttention.value = false;
      }
    })
  })
}
</script>

<template>
  <Poptip width="300" trigger="hover" placement="bottom">
    <slot></slot>
    <template #content>
      <div class="hoverInfo">
        <div class="outimg">
          <img :src="articleObject.outimg" alt="">
        </div>
        <div class="info">
          <span><b>{{ articleObject.name }}</b>（{{ articleObject.username }}）</span>
          <div v-line-clamp="3">{{ articleObject.intro }}</div>
        </div>
      </div>
      <div class="utils" v-if="articleObject.user_id != USER_INFO.user_id">
        <div class="attention" :class="{active:isAttention}"
             @click="GoAttention">{{ isAttention ? "已关注" : "关注" }}
        </div>
        <div class="chat" @click="Chitchat">聊天</div>
      </div>
    </template>
  </Poptip>
</template>

<style scoped lang="scss">
.hoverInfo {
  display: flex;
  width: 100%;

  .outimg {
    font-size: 0;

    img {
      width: 80px;
      height: 80px;
    }
  }

  .info {
    width: calc(100% - 80px);
    padding-left: 10px;
    white-space: pre-line;
    font-size: 14px;
    line-height: 1.4;

    > span {
      font-size: 16px;
    }
  }
}

.utils {
  margin-top: 5px;
  line-height: 1;
  text-align: center;
  display: flex;
  justify-content: space-between;

  .attention {
    width: calc(50% - 5px);
    font-size: 14px;
    padding: 5px 0;
    color: #666;
    border: 1px solid #ddd;
    cursor: pointer;
    user-select: none;
  }

  .chat {
    width: calc(50% - 5px);
    font-size: 14px;
    padding: 5px 0;
    color: #666;
    border: 1px solid #ddd;
    cursor: pointer;
    user-select: none;
  }

  .active {
    background-color: #65ad6a;
    border-color: #65ad6a;
    color: #fff;
  }
}
</style>
